var React = require('react');
var _ = require('underscore');
var API = require('../../../business_platform/api/api');
var ProvinceCityDistrict = React.createClass({
  propTypes: {
    value: React.PropTypes.any,
    onChange: React.PropTypes.func,
  },
  getInitialState() {
    this.result = {};
    return {
      provinceData: [],
      cityData: [],
      districtData: [],
      defaultSelect: this.props.defaultSelect
    };
  },
  componentDidMount() {
    var defaultSelect = this.state.defaultSelect;
    if(defaultSelect){
      $.ajax({
        url: API.getProvinces,
      }).done(data => {
        this.result.provinceId = defaultSelect[0];
        this.result.provinceName = _.find(data.result, {id: defaultSelect[0]}).name;
        this.setState({
          provinceData: data.result,
          defaultProvince:defaultSelect ? defaultSelect[0] : ""
        });
      });
      $.ajax({
        url: API.getCities + '?provinceId=' + defaultSelect[0],
      }).done(data => {
        this.result.cityId = defaultSelect[1];
        this.result.cityName = _.find(data.result, {id: defaultSelect[1]}).name;
        this.setState({
          cityData: data.result,
          defaultCity:defaultSelect ? defaultSelect[1] : ""
        });
      });
      $.ajax({
        url: API.getRegions + '?cityId=' + defaultSelect[1],
      }).done(data => {
        this.result.districtId = defaultSelect[2];
        this.result.districtName = _.find(data.result, {id: defaultSelect[2]}).name;
        this.setState({
          districtData: data.result,
          defaultDistrict:defaultSelect ? defaultSelect[2] : ""
        });
      });
    }else{
      $.ajax({
        url: API.getProvinces,
      }).done(data => {
        this.setState({
          provinceData: data.result,
          defaultSelect:this.props.defaultSelect
        });
      });
    }

  },
  onProvinceChange(event) {
    var provinceId = event.target.value;

    this.result.cityId = undefined;
    this.result.cityName = undefined;
    this.result.districtId = undefined;
    this.result.districtName = undefined;
    this.setState({
      cityData: [],
      districtData: [],
      defaultSelect : undefined
    });
    if(provinceId == "-1"){
      this.props.onChange(this.result)
      return;
    }
    $.ajax({
      url: API.getCities + '?provinceId=' + provinceId,
    }).done(data => {
      this.setState({
        cityData: data.result
      });
    });
    this.result.provinceId = provinceId;
    this.result.provinceName = _.find(this.state.provinceData, {id: provinceId}).name;
    this.props.onChange(this.result)
  },
  onCityChange(event) {
    var cityId = event.target.value;

    this.result.districtId = undefined;
    this.result.districtName = undefined;
    this.setState({
      districtData: []
    });
    if(!!this.state.defaultSelect){
      this.result.provinceId = this.state.defaultSelect[0];
      this.result.provinceName = _.find(this.state.provinceData, {id: this.state.defaultSelect[0]}).name;
    }
    if(cityId == "-1"){
      this.props.onChange(this.result)
      return;
    }
    $.ajax({
      url: API.getRegions + '?cityId=' + cityId,
    }).done(data => {
      this.setState({
        districtData: data.result
      });
    });
    this.result.cityId = cityId;
    this.result.cityName = _.find(this.state.cityData, {id: cityId}).name;
    this.props.onChange(this.result)
  },
  onDistrictChange(event) {
    var districtId = event.target.value;
    if(districtId == "-1"){
      return;
    }
    this.result.districtId = districtId;
    this.result.districtName = _.find(this.state.districtData, {id: districtId}).name;
    this.props.onChange(this.result)
  },
  render() {
    var { onChange, ...others} = this.props;
    var { provinceData, cityData, districtData,defaultProvince,defaultCity,defaultDistrict} = this.state;
    if(!!this.props.defaultSelect){
      if(!defaultProvince || !defaultCity || !defaultDistrict){
        return null;
      }
    }
    return (<div className="province-city-district-mod" {...others} style={{display: 'inline-block'}}>
      <select defaultValue={defaultProvince} name="" className="small" style={{marginLeft:0}} onChange={this.onProvinceChange}>
        <option value="-1">请选择省</option>
        {provinceData.map(province => <option value={province.id} key={province.id}>{province.name}</option>)}
      </select>
      <select defaultValue={defaultCity} name="" id="" className="small" onChange={this.onCityChange}>
        <option value="-1">请选择市</option>
        {cityData.map(city => <option value={city.id} key={city.id}>{city.name}</option>)}
      </select>
      <select defaultValue={defaultDistrict} name="" id="" className="small" onChange={this.onDistrictChange}>
        <option value="-1">请选择地区</option>
        {districtData.map(district => <option value={district.id} key={district.id}>{district.name}</option>)}
      </select>
    </div>);
  }
});

module.exports = ProvinceCityDistrict;